<template>
  <div class="welcome-container">
    <div class="welcome-card">
      <div class="welcome-header">
        <div class="welcome-icon">
          <el-icon><User /></el-icon>
        </div>
        <h1>欢迎使用美容美发管理系统</h1>
      </div>
      <div class="welcome-content">
        <div class="welcome-info">
          <p class="welcome-greeting">您好，{{ userData.name }}！</p>
          <p class="welcome-position">您的角色：{{ userData.position }}</p>
          <p class="welcome-time">登录时间：{{ currentTime }}</p>
        </div>
        
        <div class="role-description">
          <h3>您的权限：</h3>
          <div v-if="userData.position === '老板'">
            <p>作为老板，您可以：</p>
            <ul>
              <li>管理门店信息</li>
              <li>管理所有人员</li>
              <li>管理订单和服务</li>
              <li>管理客户信息</li>
              <li>查看统计分析</li>
              <li>进行系统设置</li>
            </ul>
          </div>
          <div v-else-if="userData.position === '管理员'">
            <p>作为管理员，您可以：</p>
            <ul>
              <li>管理人员信息</li>
              <li>管理订单和服务</li>
              <li>管理客户信息</li>
              <li>查看统计分析</li>
            </ul>
          </div>
          <div v-else>
            <p>作为员工，您可以：</p>
            <ul>
              <li>查看订单信息</li>
              <li>查看服务信息</li>
              <li>查看客户信息</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User } from '@element-plus/icons-vue'

// 用户数据
const userData = ref({
  name: '',
  position: ''
})

// 当前时间
const currentTime = ref('')

// 格式化日期时间
const formatDateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

onMounted(() => {
  // 设置当前时间
  currentTime.value = formatDateTime()
  
  // 从localStorage获取用户信息
  const userStr = localStorage.getItem('user')
  if (userStr) {
    const user = JSON.parse(userStr)
    userData.value.name = user.username
    userData.value.position = user.role
  }
})
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}

.welcome-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.welcome-header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
}

.welcome-icon {
  font-size: 24px;
  margin-right: 15px;
  background-color: #1abc9c;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-header h1 {
  margin: 0;
  font-size: 22px;
}

.welcome-content {
  padding: 20px;
}

.welcome-greeting {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.welcome-position {
  color: #606266;
  margin-bottom: 5px;
}

.welcome-time {
  color: #909399;
  font-size: 14px;
  margin-bottom: 20px;
}

.role-description {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.role-description h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.role-description p {
  margin-bottom: 10px;
  font-weight: bold;
}

.role-description ul {
  padding-left: 20px;
}

.role-description li {
  margin-bottom: 8px;
  color: #606266;
}
</style>